<template>
    <div class="topic bg-white p-4 relative overflow-x-hidden">
        <div class="title flex items-center font-bold">
            <img :src="IconTopic" class="icon mr-2" /> {{ props.topic.topicName }}
        </div>
        <div v-if="props.topic.optionVos && props.topic.optionVos.length > 0 && props.topic.topicType < 3" class="opt-list mt-2">
            <div 
            class="opt flex items-center color-gray"
            v-for="(opt, i) in props.topic.optionVos"
            :key="opt.optionId + i + 1"
            >
                <el-radio 
                v-if="[0, 1].includes(props.topic.topicType)" 
                :modelValue="opt.isCorrect ? 1 : 0" 
                :label="1" 
                size="large"
                :disabled="opt.isCorrect == 0"
                >
                    {{ opt.optionContent }}
                </el-radio>
                <el-checkbox
                v-if="props.topic.topicType == 2" 
                size="large"
                :disabled="opt.isCorrect == 0"
                :modelValue="opt.isCorrect ? true : false"
                >{{ opt.optionContent }}</el-checkbox>
            </div>
        </div>
        <div v-if="props.topic.topicType == 3" class="anwser p-3 mt-2">
            {{ props.topic.topicAnalysis }}
        </div>
    </div>
</template>

<script setup lang="ts">
import type { LMSTopic } from '@/Utils/type';
import IconTopic from '@/Assets/Images/IconTopic.svg';

const props = defineProps<{
    topic: LMSTopic;
}>();
</script>

<style lang="scss" scoped>
.topic {
    .title {
        .icon {
            width: 20px;
            height: 20px;
        }
    }
    .anwser {
        border-radius: 4px;
        border: 1px solid #E8E8E6;
        background: #F5F5F5;
        min-height: 76px;
    }   
}
</style>